<template>
  <div>
    <u-cell-group :border="false">
      <block>
        <cus-cell
          title="标题*"
          :border="false"
          v-if="
            editConfigCom.attribute &&
            editConfigCom.attribute.hasOwnProperty('title')
          "
        >
          <div class="u-slot-value">
            <u--input
              placeholder="请输入标题"
              border="surround"
              v-model="editConfigCom.attribute.title"
              @change="onChangeEmptyTips"
              maxlength="30"
            ></u--input>
          </div>
        </cus-cell>
        <div
          class="empty-tips"
          v-if="cusFormEmptyTipIds.includes(editConfigCom.id)"
        >
          请输入标题
        </div>
      </block>
      <cus-cell
        title="标题色"
        :border="false"
        ref="uCellColorPicker"
        v-if="
          editConfigCom.attribute &&
          editConfigCom.attribute.hasOwnProperty('titleColor')
        "
      >
        <div class="u-slot-color">
          <!--            <u-button @click="open" type="primary">重置</u-button>-->
          <div @click="resetColor" class="resetColor">重置</div>
          <div
            @click="open('colorPicker')"
            class="color-box"
            :style="{
              backgroundColor: editConfigCom.attribute.titleColor,
            }"
          ></div>
        </div>
        <div class="color-picker">
          <div class="color-picker-container">
            <t-color-picker
              ref="colorPicker"
              :color="color"
              @confirm="confirm"
            ></t-color-picker>
          </div>
        </div>
      </cus-cell>

      <cus-cell
        title="提示语"
        :border="false"
        v-if="
          editConfigCom.attribute &&
          editConfigCom.attribute.hasOwnProperty('placeholder')
        "
      >
        <div class="u-slot-value">
          <u-textarea
            placeholder="请输入提示语"
            border="surround"
            v-model="editConfigCom.attribute.placeholder"
            autoHeight
          />
        </div>
      </cus-cell>
      <cus-cell
        title="是否必填"
        :border="false"
        v-if="
          editConfigCom.attribute &&
          editConfigCom.attribute.hasOwnProperty('required')
        "
      >
        <div>
          <u-radio-group
            v-model="editConfigCom.attribute.required"
            placement="row"
            :activeColor="$theme.themeColor.primary"
          >
            <u-radio label="是" :name="true" style="margin-right: 10px" />
            <u-radio label="否" :name="false" />
          </u-radio-group>
        </div>
      </cus-cell>
      <cus-cell
        title="必填提示语"
        :border="false"
        v-if="
          editConfigCom.attribute &&
          editConfigCom.attribute.hasOwnProperty('requiredText') &&
          editConfigCom.attribute.required
        "
      >
        <div class="u-slot-value">
          <u-textarea
            placeholder="请输入必填提示语"
            border="surround"
            v-model="editConfigCom.attribute.requiredText"
            autoHeight
          />
        </div>
      </cus-cell>
    </u-cell-group>
  </div>
</template>

<script>
export default {
  computed: {
    pageData() {
      return this.$store.state.page.page;
    },
    editConfigComActiveId() {
      return this.$store.state.page.editConfigComActiveId;
    },
    activeIndex({ pageData, editConfigComActiveId }) {
      return pageData.items.findIndex((v) => v.id === editConfigComActiveId);
    },
    //组件本身属性
    editConfigCom({ pageData, activeIndex }) {
      return pageData.items[activeIndex];
    },
    cusFormEmptyTipIds() {
      return this.$store.state.page.cusFormEmptyTipIds;
    },
  },
  data() {
    return {
      originalColor: {},
    };
  },
  created() {},
  methods: {
    //标题未填提示,以组件id为标识
    onChangeEmptyTips() {
      const {
        id,
        attribute: { title },
      } = this.editConfigCom;
      const index = this.cusFormEmptyTipIds.findIndex((v) => v === id);
      const isHasCom = index > -1;
      const isEmpty = title.length === 0;
      const cusFormEmptyTipIds = [...this.cusFormEmptyTipIds];
      //当组件未填标题的时候
      if (isEmpty) {
        if (isHasCom) return;
        cusFormEmptyTipIds.push(id);
      } else {
        //当存在的时候
        console.log();
        cusFormEmptyTipIds.splice(index, 1);
      }
      this.$store.dispatch("page/setCusFormEmptyTipIds", cusFormEmptyTipIds);
    },
    //---- 颜色选择器 start----
    handleColor() {
      //颜色处理
      const color = this.editConfigCom?.editConfigCom?.titleColor
        .replace("rgba", "")
        .replace("rgb", "")
        .replace("(", "")
        .replace(")", "")
        .split(",");
      const colorObject = Object.assign(
        {},
        {
          r: color[0] || 0,
          g: color[1] || 0,
          b: color[2] || 0,
          a: color[3] || 1,
        }
      );
      this.color = colorObject;
      // console.log("颜色处理====", colorObject, this.color);
      this.originalColor = this.color;
    },
    open(ref) {
      // 打开颜色选择器
      this.$refs[ref].open();
    },
    resetColor() {
      this.originalColor = {
        r: 0,
        g: 0,
        b: 0,
        a: 1,
      };
      this.color = this.originalColor;
      const rgba = this.originalColor;
      this.editConfigCom.attribute.titleColor = `rgb(${rgba.r},${rgba.g},${rgba.b})`;
    },
    confirm(e) {
      const { rgba } = e;
      this.color = rgba;
      this.editConfigCom.attribute.titleColor = `rgb(${rgba.r},${rgba.g},${rgba.b})`;
    },

    //----颜色选择器 end----
  },
};
</script>

<style scoped lang="scss">
.empty-tips {
  padding-left: 15px;
  font-size: 13px;
  text-align: left;
  color: $u-error;
}
.u-slot-color {
  display: flex;
  align-items: center;
}
.color-box {
  margin-left: 10px;
  width: 100px;
  height: 35px;
  border: 1px solid lightgray;
}
.color-picker {
  position: absolute;
  &-container {
    position: absolute;
    top: 20px;
    //left: -15px;
    z-index: 9999;
  }
}
</style>
